<template>
  <div class="publicBox" id="stockAddCss">

<el-form ref="form" :model="ruleForm" :rules="rules" class="demo-form-inline publicEditFrom" label-width="180px" label-position="left">

<el-row>
               <p class="pubPageTagP">库存管理/设备入库</p>
</el-row>

<el-row>
<el-form-item label="设备类型" prop="typeid">
                          <el-select v-model="ruleForm.typeid" @change="changeType" filterable  placeholder="洗衣机" class="pubSltL">
                                <el-option
                                  v-for="item in deviceTypArray"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                          </el-select>
</el-form-item>
</el-row>

<el-row>
        <el-form-item label="设备型号" prop="model" >
                              <el-select v-model="ruleForm.model" @change="changeModel" filterable  placeholder="XCG-800" class="pubSltL">
                                   <el-option
                                    v-for="item in modelArray"
                                    :key="item.id"
                                    :label="item.model"
                                    :value="item.id">
                                  </el-option>
                              </el-select>
       </el-form-item>
</el-row>

<el-row>
      <el-form-item label="设备品牌">
                <p>{{ruleForm.brandName}}</p>
      </el-form-item>
</el-row>

<el-row>
      <el-form-item label="设备名称">
                 <p>{{ruleForm.name}}</p>
      </el-form-item>
</el-row>

<el-row>
         <el-form-item label="SN"  prop="sn">
                 <el-input class="pubSerIpt" v-model="ruleForm.sn"  placeholder="请输入设备SN号"></el-input>
       </el-form-item>
</el-row>

<el-row>
         <el-form-item label="供应商" prop="supplierid">
                            <el-select v-model="ruleForm.supplierid" filterable  placeholder="上海加糖科技有限公司" class="pubSltL">
                                 <el-option
                                    v-for="item in supperArray"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                  </el-option>
                            </el-select>
       </el-form-item>
</el-row>

<el-row class="pubSubmitBtn-row">
    <el-form-item>
      <el-button class="pubBtnBlue" type="primary" @click="submitForm('form')">提交</el-button>
            <el-button class="pubBtnGray"  type="primary" @click="$canCleFn">取消</el-button>
    </el-form-item>
            

</el-row>

</el-form>
    
  </div>
</template>

<script>
import * as API from "@api/equipmenter.js"

export default {
  components: {


  },
  data() {
    return {
      ruleForm:{
          typeid:"",
          brandName:"",
          name:"",
          model:"",
          sn:"",
          supplierid:''
      },
      rules:{
          typeid:[
              { required: true, message: '请选择设备类型', trigger: 'blur' },
          ],
          model:[
              { required: true, message: '请输入设备型号', trigger: 'blur' },
          ],
          sn:[
              { required: true, message: '请输入设备SN号', trigger: 'blur' },
          ],
          supplierid:[
              { required: true, message: '请选择供应商', trigger: 'blur' },
          ]
      },
      deviceTypArray: [],
      modelArray: [],
      supperArray: [],
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            API.addStore(this.ruleForm).then(res=>{
                 if(res.IsPositive){
                  this.$message.success({message:"添加成功"})
                  this.$router.go(-1)
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
            })
          } else {
            return false;
          }
        });
      },
      changeType(id){   //当前选中的设备类型id,  根据设备类型,赛选下面的设备型号
        API.getMent({typeid:id}).then(res=>{
          if(res.IsPositive){
                  this.$set(this.ruleForm,'model','')
                  this.$set(this.ruleForm,'name','')
                  this.$set(this.ruleForm,'brandName','')
                  this.modelArray=res.Data.records
                }else{
                  this.$message.error({message:res.ErrorCode})
                }
        })  
      },
      changeModel(id){  //通过选着设备型号,连带选出相关信息
              for(let item in this.modelArray){
                  if(id==this.modelArray[item].id){
                    this.ruleForm.brandName=this.modelArray[item].brandname
                    this.ruleForm.name=this.modelArray[item].name
                    this.ruleForm.model=this.modelArray[item].model
                    return
                    }
              }
      }
  },
  async created() {
      Promise.all([this.$getDeviceType(2,true),API.getSupplierApi({})]).then(res=>{
               this.deviceTypArray=res[0]
               this.supperArray=res[1].Data.records

      })

  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>

</style>